<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="../js/echarts.min.js"></script>
	<script src="../js/china.js"></script>
	
	<!-- 引入excel数据读取插件 -->
	<script type="text/javascript" src="xlsx.core.min.js"></script>
	<script language="javascript" type="text/javascript">
	
	<!--以下为显示当前时间、日期的javascript代码
	//获得当前时间,刻度为一千分一秒
	var initializationTime=(new Date()).getTime();
	function getNowFormatDate() {
	    var date = new Date();
	    var year = date.getFullYear();
	    var month = date.getMonth() + 1;
	    var strDate = date.getDate();
	    var Hour =  date.getHours();       // 获取当前小时数(0-23)
	    var Minute =  date.getMinutes();     // 获取当前分钟数(0-59)
	    var Second = date.getSeconds();     // 获取当前秒数(0-59)
	    var show_day=new Array('星期日','星期一','星期二','星期三','星期四','星期五','星期六');
	    var day=date.getDay();
	    if (Hour<10) {
	        Hour = "0" + Hour;
	    }
	    if (Minute <10) {
	        Minute = "0" + Minute;
	    }
	    if (Second <10) {
	        Second = "0" + Second;
	    }
	    if (month >= 1 && month <= 9) {
	        month = "0" + month;
	    }
	    if (strDate >= 0 && strDate <= 9) {
	        strDate = "0" + strDate;
	    }
		var sty1='style=\"font-size: 16px;line-height:0.3;\"' //line-height行间距
	    var currentdate = '<div><p '+sty1+'>'+year + '年' + month +'月' + strDate+'号</p><p '+sty1+'>'+show_day[day]+'</p></div>';
	    var HMS = Hour + ':' + Minute +':' + Second;
		//document.all.show.innerHTML=""+year+"年"+month+"月"+day+"日 "+hours+":"+minutes+":"+seconds+"";
		document.all.show2.innerHTML=currentdate;<!-- 在id=show1的元素内又插入HTML元素(即innerHTML)-->
		document.all.show1.innerHTML=HMS//在id=show1的元素上显示时间
		
		
	    setTimeout(getNowFormatDate,1000);//每隔1秒重新调用一次该函数
	}
	//-->
	 /* function fontSize(){
	        var deviceWidth=document.documentElement.clientWidth>760?760:document.documentElement.clientWidth;
	        document.documentElement.style.fontSize=(deviceWidth/76)+"px";
	    }
	    fontSize();
	    window.onresize=fontSize; */
		</script>
	
</head>
<!--onload事件：当文档加载完成后运行 JavaScript 脚本getNowFormatDate()，显示当前的时间日期 -->
<body  onload="getNowFormatDate()" background="../image/4.jpeg" style=" background-repeat:no-repeat ;background-size:100% 100%;
			background-attachment: fixed;opacity=0.4" ><!--opacity透明度，等同于alpha --><!-- -->
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <!-- background给页面添加背景图片 -->
    <!-- 给页面添加文字标题“echarts大数据可视化实训” -->
    <h1 style="width:100%;font-size: 30px;color:rgba(255,255,255,1);height:24px;top:2%,align:center;
                                  text-align: center;box-sizing: border-box;margin-top:25px"><!--margin-top:距离顶部距离，或者给外面盒子一个padding-top: -->
    	永祥商贸公司销售情况展板
    </h1>
      <!--id="show" -->
      <!--
    <label id="show1" style="color:rgba(255,255,255,1);position:absolute;left:50%;top:2%;">         <!--label标签的id是show1,这个标签在显示时间的js脚本中出现 -->
    <!--</label>-->
    <!--添加表格显示时间 -->
    <ul >
    	<li id="show1" style="color:rgba(255,255,255,1);position:absolute;left:80%;top:2%;width:140px;list-style-type: none;"><!--list-style-type: none;不显示列表前的符号-->
    	</li>
    	<li id="show2" style="color:rgba(255,255,255,1);position:absolute;left:85%;top:0%;width:140px;list-style-type: none;">		
    	</li>
    </ul>
    <!-- 在一个页面上布置多个dom，绘制多个图形并实现联动 -->
    <div>
    	<!-- 饼状图Dom1 -->
    	<div>
    		<!--Dom1的范围 -->
    		<div  id="main1" style="position:absolute;left:2%;top:2%;width: 27%;height:36%;background-color:transparent;
    				background-color: rgba(10,30,39,0.6);" ></div>
    		<!-- 在dom1四个角放置短线其实是在四个角叠加了四个小正方形区域，每个区域只显示了一半的边框线 -->	
    		<!--左上角 -->
    		<span style=" position:absolute;width:13px;height:13px;border-left:solid 2px #4275E6;  
    					  border-top:solid 2px #4275E6;left:2%;top:2%;"></span>
    		<!--左下角 -->			  
    		<span style=" position:absolute;width:13px;height:13px;border-left:solid 2px #4275E6;   
    					  border-bottom:solid 2px #4275E6;left:2%;bottom:62%;"></span>
    		<!--右上角 -->			  
    		<span style=" position:absolute;width:13px;height:13px;border-right:solid 2px #4275E6;  
    					  border-top:solid 2px #4275E6;right:71%;top:2%;"></span>
    		<!--右下角 -->			  
    		<span style=" position:absolute;width:13px;height:13px;border-right:solid 2px #4275E6;   
    					  border-bottom:solid 2px #4275E6;right:71%;bottom:62%;"></span>
    	</div>			
        <!-- 柱状图Dom2 -->
       <div id="main2" style="position:absolute;left:2%;top:40%;width: 27%;height:36%;background-color:transparent;
    		background-color: rgba(10,30,39,0.6);"></div>
       <!-- 在dom2四个角放置短线其实是在四个角叠加了四个小正方形区域，每个区域只显示了一半的边框线 -->
       <span style=" position:absolute;width:13px;height:13px;border-left:solid 2px #4275E6;
       			  border-top:solid 2px #4275E6;left:2%;top:40%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-left:solid 2px #4275E6;
       			  border-bottom:solid 2px #4275E6;left:2%;bottom:24%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-right:solid 2px #4275E6;
       			  border-top:solid 2px #4275E6;right:71%;top:40%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-right:solid 2px #4275E6;
       			  border-bottom:solid 2px #4275E6;right:71%;bottom:24%;"></span>
    			  
       <!-- 柱状图Dom3 -->
       <div id="main3" style="position:absolute;left:2%;top:78%;width: 27%;height:20%;background-color:transparent;
    		background-color: rgba(10,30,39,0.6);"></div>
       <!-- 在dom3四个角放置短线其实是在四个角叠加了四个小正方形区域，每个区域只显示了一半的边框线 -->
       <span style=" position:absolute;width:13px;height:13px;border-left:solid 2px #4275E6;
       			  border-top:solid 2px #4275E6;left:2%;top:78%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-left:solid 2px #4275E6;
       			  border-bottom:solid 2px #4275E6;left:2%;bottom:2%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-right:solid 2px #4275E6;
       			  border-top:solid 2px #4275E6;right:71%;top:78%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-right:solid 2px #4275E6;
       			  border-bottom:solid 2px #4275E6;right:71%;bottom:2%;"></span>
    			  
       <!-- 柱状图Dom4 -->
       <div id="main4" style="position:absolute;left:31%;top:10%;width: 38%;height:49%;background-color:transparent;
    		background-color: rgba(10,30,39,0.6);"></div>
       <!-- 在dom4四个角放置短线其实是在四个角叠加了四个小正方形区域，每个区域只显示了一半的边框线 -->
       <span style=" position:absolute;width:13px;height:13px;border-left:solid 2px #4275E6;
       			  border-top:solid 2px #4275E6;left:31%;top:10%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-left:solid 2px #4275E6;
       			  border-bottom:solid 2px #4275E6;left:31%;bottom:41%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-right:solid 2px #4275E6;
       			  border-top:solid 2px #4275E6;right:31%;top:10%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-right:solid 2px #4275E6;
       			  border-bottom:solid 2px #4275E6;right:31%;bottom:41%;"></span>
    			  
       <!-- 柱状图Dom5 -->
       <div id="main5" style="position:absolute;left:31%;top:61%;width: 38%;height:37%;background-color:transparent;
    		background-color: rgba(10,30,39,0.6);"></div>
       <!-- 在dom5四个角放置短线其实是在四个角叠加了四个小正方形区域，每个区域只显示了一半的边框线,top是距离顶部距离，bottom是距离底部距离 -->
       <span style=" position:absolute;width:13px;height:13px;border-left:solid 2px #4275E6;
       			  border-top:solid 2px #4275E6;left:31%;top:61%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-left:solid 2px #4275E6;
       			  border-bottom:solid 2px #4275E6;left:31%;bottom:2%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-right:solid 2px #4275E6;
       			  border-top:solid 2px #4275E6;right:31%;top:61%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-right:solid 2px #4275E6;
       			  border-bottom:solid 2px #4275E6;right:31%;bottom:2%;"></span>
       <!-- 柱状图Dom6 -->
       <div id="main6" style="position:absolute;left:70%;top:5%;width: 30%;height:44%;background-color:transparent;
    		background-color: rgba(10,30,39,0.6);"></div>
       <!-- 在dom1四个角放置短线其实是在四个角叠加了四个小正方形区域，每个区域只显示了一半的边框线 -->
       <span style=" position:absolute;width:13px;height:13px;border-left:solid 2px #4275E6;
       			  border-top:solid 2px #4275E6;left:70%;top:5%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-left:solid 2px #4275E6;
       			  border-bottom:solid 2px #4275E6;left:70%;bottom:51%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-right:solid 2px #4275E6;
       			  border-top:solid 2px #4275E6;right:0%;top:5%;"></span>
       			  
       <span style=" position:absolute;width:13px;height:13px;border-right:solid 2px #4275E6;
       			  border-bottom:solid 2px #4275E6;right:0%;bottom:51%;"></span>
    			  
       <!-- 柱状图Dom7--> 
       <div id="main7" style="position:absolute;left:70%;top:51%;width: 30%;height:47%;background-color:transparent;
    		background-color: rgba(10,30,39,0.6);"></div>
    	<!-- 在dom1四个角放置短线其实是在四个角叠加了四个小正方形区域，每个区域只显示了一半的边框线 -->
    	<span style=" position:absolute;width:13px;height:13px;border-left:solid 2px #4275E6;
    				  border-top:solid 2px #4275E6;left:70%;top:51%;"></span>
    				  
    	<span style=" position:absolute;width:13px;height:13px;border-left:solid 2px #4275E6;
    				  border-bottom:solid 2px #4275E6;left:70%;bottom:2%;"></span>
    				  
    	<span style=" position:absolute;width:13px;height:13px;border-right:solid 2px #4275E6;
    				  border-top:solid 2px #4275E6;right:0%;top:51%;"></span>
    				  
    	<span style=" position:absolute;width:13px;height:13px;border-right:solid 2px #4275E6;
    				  border-bottom:solid 2px #4275E6;right:0%;bottom:2%;"></span>
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));
        var myChart2 = echarts.init(document.getElementById('main2'));
        // var myChart3 = echarts.init(document.getElementById('main3'));//自己添加个图试一试
        var myChart4 = echarts.init(document.getElementById('main4'));
        var myChart5 = echarts.init(document.getElementById('main5'));
        var myChart6 = echarts.init(document.getElementById('main6'));
        var myChart7 = echarts.init(document.getElementById('main7'));
        
        
        
        
        
        
       //准备数据
      
      


        // 指定图表的配置项和数据
        var option1 = {
        	xAxis:{
        		type:'category',
        		data:["按摩椅",'跑步机','微波炉','显示器','液晶电视']
        	},
        	axisTick:{
        		alignWithLabel:true,
        	},
        	yAxis:[
        	{
        		name:'金额（元）',
        		nameTextStyle:{
        			color:"#65ABE7",
        			fontSize:12,
        		},
        		type:'value',
        		max:10000
        	},
        	{
        		name:"数量（台）",
        		nameTextStyle:{
        			color:"#65ABE7",
        			fontsize:12
        		},
        		type:"value",
        		max:1500
        	},
        	],
//      	grid:{y:"25%",height:"60%"},
        	axisLabel:{color:'white'},
        	legend:{
        		data:['单价','销售数量'],
        		textStyle:{color:"white"},
        		top:'10%'
        },
        series:[
        {
        	name:'单价',
        	data:[800,2200,500,1500,5000],
        	type:'line',
        	yAxisIndex:0,
        	color:'red'
        },
        {
        	name:'销售数量',
        	data:[354,671,494,1123,617],
        	type:'line',
        	yAxisIndex:1
        }
        ]
        };
        
          var sales_amount={"按摩椅":"283200","跑步机":"1476200","微波炉":"247000","显示器":"1684500",'液晶电视':'3085000'};
      


        // 指定图表的配置项和数据
        var option2 = {
        	title:{
        		text:'商品销售额',
        		subtext:'',
        		x:'center',
        		textStyle:{color:'white'}
        	},
        	//鼠标触发提示
        	tooltip:{
        		trigger:'item',
        		confine:'True',
        		formatter:"{a}<br/>{b}:{c}({d}%)"
        	},
        	//图列
        	legend:{
        		orient:"horizontal",
        		x:"center",
        		top:"12%",
        		textStyle:{color:"white",fontsize:'10'},
        		data:['按摩椅','跑步机','微波炉','显示器','液晶电视'],
        		itemWidth:15,itemHeigth:8,
        	},
        	calculable:true,
        	series:[
        	{
        		name:'访问来源',
        		type:'pie',
        		radius:'50%',
        		center:['50%','60%'],
        		data:[
        		{value:283200,name:'按摩椅'},
        		{value:1476200,name:'跑步机'},
        		{value:247000,name:'微波炉'},
        		{value:1684500,name:'显示器'},
        		{value:3085000,name:'液晶电视'},
        		],
        		itemStyle:{
        			normal:{
        				shadowBlur:200,
        				shadowColor:'rgba(255,0,0,0.5)',
        				label:{
        					show:true,
        					color:'white',
        					formatter:'({d}%)\n{b}:{c}'
        				},
        				labelLine:{show:true}
        			}
        		}
        	}]
        
        };
        
       var area_data=[{'name':'北京',value:2678900},
       {name:'杭州',value:1288700},
       {name:'南京',value:1200900},
       {name:'济南',value:988800},
       {name:'上海',value:618600},
       ];
      var geoCoordMap ={//各个城市的经纬度坐标
      	'北京':[116.4551,40.2539],'杭州':[119.5313,29.8773],'济南':[117.1582,36.8701],'南京':[118.8062,31.9208],'上海':[121.4648,31.2891]
      };
      var convertData=function (data){//将geoCoordMap中的坐标数据和销售数据合并，返回值合并后的值 给convertData
      	var res =[];
      	for (var i=0;i<data.length;i++){
      		var geoCoord=geoCoordMap[data[i].name];
      		if(geoCoord){
      			res.push({name:data[i].name,
      			value:geoCoord.concat(data[i].value)});
      		}
      	}
      	return res;
      };
      var color=['#3ed4ff','#ffa022','#a6c84c'];



        // 指定图表的配置项和数据
        var option4 = {
        	backgroundColor:'',
        	title:{
        		text:'区域销售情况图',
        		left:'center',
        		top:'7%',
        		textStyle:{
        			color:'rgb(255,133,133)'
        		}
        	},tooltip:{
        		trigger:'item',
        		formatter:"{b0}:{c}",
        	},
        	legend:{
        		orient:"vertical",
        		top:'bottom',
        		left:"rigth",
        		data:[],
        		textStyle:{
        			color:"#fff"
        		},
        		selectedMode:'single'
        		
        	},
        	geo:{
        		map:"china",
        		zoom:1.2,
        		label:{
        			emphasis:{
        				show:false
        			}
        		},
        		roam:true,//动态缩放地图
        		itemStyle:{
        			normal:{
        				areaColor:"#142957",
        				borderColor:"#0692a4"
        			},emphasis:{
        				areaColor:"#0b1c2d"
        			}
        		}
        		
        	},
        	series:[{
        		name:'城市',
        		type:'effectScatter',//动态散点图
        		data:convertData(area_data),
        		coordinateSystem:'geo',
        		zlevel:2,
        		rippleEffect:{
        			brushType:'stroke'
        		},
        		label:{
        			normal:{
        				show:true,
        				position:'right',
        				formatter:"{b}"
        			}
        		},
        		symbolSize:function(val){
        			return val[2]/80000;
        		},
        		itemStyle:{
        			normal:{
        				color:color[1]
        			}
        		},
        	}]
        	
        };
        
           // 指定图表的配置项和数据
        var option5 = {
        	dataset:{
        		source:[
        		['product','第一季度','第二季度','第三季度','第四季度'],
        		['按摩椅',54400,24800,110400,83200],
        		['跑步机',864600,264000,132000,2156001],
        		['微波炉',32500,47000,105000,14500],
        		['显示器',79500,367500,409500,444000],
        		['液晶电视',1205000,125000,550000,315000],
        		]
        	},
        	tooltip:{
        		confine:'True',
        		trigger:'axis',
        		axisPointer:{
        			type:'shadow',
        		},
        	},
        	legend:{
        		orient:'horizontal',
        		x:'center',
        		top:'8%',
        		textStyle:{color:'white',fontSize:'10'},
        		data:['第一季度','第二季度','第三季度','第四季度']
        	},
        	toolbox:{
        		show:true,
        		orient:'vertical',
        		top:'center',
        		feature:{
        			mark:{show:true},
        			magicType:{show:true,type:['line','bar','stack','tiled']},
        			restore:{show:true},
        			saveAsImage:{show:true}
        			
        		}
        	},
        	calculable:true,
        	xAxis:[{
        		type:'category',
        		axisTick:{
        		alignWithLabel:true,
        		},
        	}
        	],
        	yAxis:[
        	{
        		name:'金额（元）',
        		nameTextStyle:{
        			color:'65ABE7',
        			fontSize:12,
        		},
        		type:'value',
        		splitArea:{show:true}
        	}
        	],
        	axisLabel:{color:'white'},
        	grid:{x:"15%"},
        	series:[{
        		name:'第一季度',
        		type:'bar',
        		stack:'总量',
        	},{
        		name:'第二季度',
        		type:'bar',
        		stack:'总量',
        	},{
        		name:'第三季度',
        		type:'bar',
        		stack:'总量',
        	},{
        		name:'第四季度',
        		type:'bar',
        		stack:'总量'
        	},
        	]
        };
        
        var option6 = {
				color: ['rgba(255, 0, 0)', 'rgba(0, 255, 0)', 'rgba(225, 50, 220)'],
				title: {
					text: '销售金额季度雷达图',
					textStyle: {
						color: 'white',
						fontSize: '20'
					},
				},
				tooltip: {},
				legend: {
					orient: 'horizontal', // 垂直显示vertical
					x: 'left', // 显示位置--左上left,center,right
					left: '10%',
					top: '12%',
					width: '40%',
					textStyle: {
						color: 'white',
						fontSize: '10'
					},
					//data:['按摩椅','跑步机','微波炉','显示器','液晶电视'],
					data: ['跑步机', '显示器', '液晶电视'],
					itemWidth: 15,
					itemHeight: 8, //标记图形的长宽			 
				},
				radar: {
					// shape: 'circle',
					radius: '70%', //的半径占当前视图长度的百分比
					center: ['50%', '50%'], //饼图的圆心在当前视图中的位置
					indicator: [ //雷达图的指示器，用来指定雷达图中的多个变量（维度）
						{
							name: '第一季度',
							max: 1250000
						},
						{
							name: '第二季度',
							max: 400000
						},
						{
							name: '第三季度',
							max: 600000
						},
						{
							name: '第四季度',
							max: 2500000
						},
					],
					// 设置雷达图中间射线的颜色
					axisLine: {
						lineStyle: {
							color: 'rgba(250,250,250,0.9)', //射线的颜色
							fontSize: '8'
						},
					},
					splitArea: {
						show: true,
						areaStyle: {
							color: 'rgba(255,255,255,0.1)', // 图表背景的颜色
						},
					},
					splitLine: {
						show: true,
						lineStyle: {
							width: 1,
							color: 'rgba(255,255,255,0.3)', // 设置网格的颜色
						},
					},
				},
				// grid:[{left:'2%',top:'2%',height:'50%',width:'50%'},
				//       {left:'2%',bottom:'0%',height:'48%',width:'80%'},
				// ],
				x: [{
					gridIndex: 0
				}, {
					gridIndex: 1
				}],
				y: [{
					gridIndex: 0
				}, {
					gridIndex: 1
				}],
				series: [{
					type: 'radar',
					//lineStyle:{normal: {width: 2,opacity: 0.5,color:'rgb(0, 255, 0)'}},
					xAxisIndex: 0,
					yAxisIndex: 0,
					areaStyle: {
						normal: {
							width: 1,
							opacity: 0.5, //雷达图面积填充的透明度，alpha
						},
					},
					data: [
						/* {
      					   value: [54400,24800,110400,83200],
      					   name: '按摩椅',
      					   areaStyle: {
      								   color: 'rgba(0, 255, 0, 0.6)'
      					   },
      				       lineStyle:{normal: {width: 2,opacity: 0.5,color:'rgb(0, 255, 0)'}},
      	              }, */
						{
							value: [864600, 264000, 132000, 2156001],
							name: '跑步机',
							areaStyle: {
								color: 'rgba(255, 0, 0, 0.6)'
							},
							lineStyle: {
								normal: {
									width: 2,
									opacity: 0.5,
									color: 'rgb(255, 0, 0)'
								}
							},
						},
						/*  {
      					  value: [32500,47000,105000,14500],
      					   name: '微波炉',
      					   areaStyle: {
      					   											   color: 'rgba(0, 0, 255, 0.6)'
      					   },
      					   lineStyle:{normal: {width: 2,opacity: 0.5,color:'rgb(0, 0,255)'}},
      			      }, */
						{
							value: [79500, 367500, 409500, 444000],
							name: '显示器',
							areaStyle: {
								color: 'rgba(0, 255, 0, 0.6)'
							},
							lineStyle: {
								normal: {
									width: 2,
									opacity: 0.5,
									color: 'rgb(0, 255, 0)'
								}
							},
						},
						{
							value: [1205000, 125000, 550000, 315000],
							name: '液晶电视',
							areaStyle: {
								color: 'rgba(225,50,220, 0.6)'
							},
							lineStyle: {
								normal: {
									width: 2,
									opacity: 0.5,
									color: 'rgb(225, 50, 220)'
								}
							},
						}
					]
				}, ]
			};
        
        var option7 = {
				//柱状图
				legend: {
					orient: 'horizontal', // 垂直显示vertical
					x: 'center', // 显示位置--左上left,center,right
					top: '5%',
					textStyle: {
						color: 'white',
						fontSize: '10'
					},
					data: ['第一季度', '第二季度', '第三季度', '第四季度'],
					itemWidth: 15,
					itemHeight: 8, //标记图形的长宽
				},
				tooltip: {},
				dataset: {
					// 提供一份数据。
					source: [
						['product', '第一季度', '第二季度', '第三季度', '第四季度'],
						['按摩椅', 54400, 24800, 110400, 83200],
						['跑步机', 864600, 264000, 132000, 2156001],
						['微波炉', 32500, 47000, 105000, 14500],
						['显示器', 79500, 367500, 409500, 444000],
						['液晶电视', 1205000, 125000, 550000, 315000],
					]
				},
				// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
				xAxis: {
					type: 'category',
					axisTick: {
						alignWithLabel: true, //刻度线与标签对齐
					},
					axisLabel: {
						textStyle: {
							color: 'white',
							fontSize: '10'
						},
					} //坐标轴的刻度标签属性设置
				},
				// 声明一个 Y 轴，数值轴。
				yAxis: {
					name: '金额（元）', //给坐标轴起个名字
					nameTextStyle: {
						color: "#65ABE7",
						fontSize: 12,
					},
					axisLabel: {
						textStyle: {
							color: 'white',
							fontSize: '10'
						},
					},
				},
				// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
				grid: { //设置绘图区域在当前视图的位置，参数由左上角x,y,右下角x2,y2,长宽，width,height
					x: '20%',
					y: '20%',
					//x2:5,
					//y2:20,
					borderWidth: 1
				},
				series: [{
						type: 'bar'
					},
					{
						type: 'bar'
					},
					{
						type: 'bar'
					},
					{
						type: 'bar'
					}
				]
			};

        
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option1);
        myChart2.setOption(option2);
		// myChart3.setOption(option3);//自己添加个图练习
        myChart4.setOption(option4);
        myChart5.setOption(option5);
        myChart6.setOption(option6);
        myChart7.setOption(option7);
        
        
        
        
    </script>
</body>
</html>